<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }

.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; cursor: pointer; filter:alpha(opacity: 0); opacity:0; }
.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001;cursor: pointer; filter:alpha(opacity: 0); opacity:0; }

.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }
</style>
<script src="move.js"></script>
<script>
function getClass(sClass,oParent){
	var oParent=oParent||document;
	var result=[];
	var aEle=document.getElementsByTagName('*');
	for(var i=0;i<aEle.length;i++){
		if(checkClass(aEle[i].className,sClass)){
			result.push(aEle[i])	
		};	
	};	
	return result;
};

function checkClass(moreClass,val){
	var arr=moreClass.split(' ');
	for(var i=0;i<arr.length;i++){
		if(arr[i]==val){
			return true;	
		};	
	};
	return false;
}



window.onload=function(){
	var box=getClass('play')[0];
	var prev=getClass('prev',box)[0];	
	var next=getClass('next',box)[0];	
	var mark_left=getClass('mark_left',box)[0];	
	var mark_right=getClass('mark_right',box)[0];
	//大图上的按钮
	mark_left.onmouseover=prev.onmouseover=function(){
		startMove(prev,'opacity',100);	
	};
	mark_left.onmouseout=function(){
		startMove(prev,'opacity',0);	
	};
	mark_right.onmouseover=next.onmouseover=function(){
		startMove(next,'opacity',100);	
	};
	mark_right.onmouseout=function(){
		startMove(next,'opacity',0);	
	};
	
	//点击小图，显示大图
	var oSmallUl=getClass('small_pic',box)[0].getElementsByTagName('ul')[0];
	var aSmallLi=oSmallUl.getElementsByTagName('li');
	var oneWidth=aSmallLi[0].offsetWidth;
		oSmallUl.style.width=oneWidth*aSmallLi.length+'px';
	var oBigUl=getClass('big_pic',box)[0];
	var aBigLi=oBigUl.getElementsByTagName('li');
	var iNow=0;
	var minZindex=2;
	for(var i=0;i<aSmallLi.length;i++){
		aSmallLi[i].index=i;
		aSmallLi[i].onmouseover=function(){
			startMove(this,'opacity',100);	
		};	
		aSmallLi[i].onmouseout=function(){
			if(this.index!=iNow){
				startMove(this,'opacity',60);	
			}
		};	
		
		aSmallLi[i].onclick=function(){
			if(iNow==this.index){
				return;	
			};
			iNow=this.index;
			tab();
		};
		
		function tab(){
			for(var i=0;i<aSmallLi.length;i++){
				startMove(aSmallLi[i],'opacity',60);	
			};
			startMove(aSmallLi[iNow],'opacity',100);
			aBigLi[iNow].style.zIndex=minZindex++;
			aBigLi[iNow].style.height=0;
			startMove(aBigLi[iNow],'height',oBigUl.offsetHeight)
			if(iNow==0){
				startMove(oSmallUl,'left',0);
			}else if(iNow==aSmallLi.length-1){
				startMove(oSmallUl,'left',-(iNow-2)*aSmallLi[0].offsetWidth);
			}else{
				startMove(oSmallUl,'left',-(iNow-1)*aSmallLi[0].offsetWidth);
			}	
		};
		
		prev.onclick=function(){
			iNow--;
			if(iNow==-1){
				iNow=aSmallLi.length-1;	
			};	
			tab();
		};
		next.onclick=function(){
			iNow++;
			if(iNow==aSmallLi.length){
				iNow=0;	
			};	
			tab();
		};
		
		
	};
	
}


</script>
</head>

<body>
<div id="playimages" class="play">
    <ul class="big_pic">
		<div class="prev"></div>
		<div class="next"></div>

		<div class="text">加载图片说明……</div>
		<div class="length">计算图片数量……</div>
		
		<a class="mark_left" href="javascript:;"></a>
		<a class="mark_right" href="javascript:;"></a>
		<div class="bg"></div>
		
        <li style="z-index:1;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>
</html>
